import { useState, useEffect } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { TabBar } from "antd-mobile";

export default function Home(props) {
  const locationInfo = useLocation();
  const navigate = useNavigate();
  const [selectedTab, setSelectedTab] = useState(locationInfo.pathname);
  const tabs = [
    {
      key: "/home",
      title: "首页",
      icon: "url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat",
      selectedIcon:
        "url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat",
    },
    {
      key: "/home/cityList",
      title: "城市列表",
      icon: "url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat",
      selectedIcon:
        "url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat",
    },
    {
      key: "/home/news",
      title: "其他",
      icon: "url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat",
      selectedIcon:
        "url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat",
    },
    {
      key: "/home/my",
      title: "我的",
      icon: "url(https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg) center center /  21px 21px no-repeat",
      selectedIcon:
        "url(https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg) center center /  21px 21px no-repeat",
    },
  ];

  useEffect(() => {
    if (locationInfo.pathname !== selectedTab) {
      // 路由切换
      setSelectedTab(locationInfo.pathname);
    }
  }, [locationInfo.pathname, selectedTab]);

  return (
    <div className="home">
      <Outlet />
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#33A3F4"
        barTintColor="white"
        tabBarPosition="bottom"
        noRenderContent
      >
        {tabs.map((res) => {
          return (
            <TabBar.Item
              title={res.title}
              key={res.key}
              icon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",
                    background: res.icon,
                  }}
                />
              }
              selectedIcon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",
                    background: res.selectedIcon,
                  }}
                />
              }
              selected={selectedTab === res.key}
              onPress={() => {
                navigate(res.key);
                setSelectedTab(res.key);
              }}
            ></TabBar.Item>
          );
        })}
      </TabBar>
    </div>
  );
}
